<template>
  <div>
    <p class="font"><b>网站概况</b></p>
    <div class="brief">
      <!--      软件-->
      <div class="briefBox">
        <span class="iconfont icon color" style="font-size: 45px!important;">&#xe640;</span>
        <div class="briefText">
          <p>软件数</p>
          <p>今日新增：<span class="color">{{webGeneral[0].addNums}}</span></p>
          <p>累计：{{webGeneral[0].allNums}}</p>
        </div>
      </div>
      <i></i>
      <!--      用户-->
      <div class="briefBox">
        <span class="iconfont icon color">&#xe607;</span>
        <div class="briefText">
          <p>用户数</p>
          <p>今日新增：<span class="color">{{webGeneral[1].addNums}}</span></p>
          <p>累计：{{webGeneral[1].allNums}}</p>
        </div>
      </div>
      <i></i>
      <!--      评论-->
      <div class="briefBox">
        <span class="iconfont icon color">&#xe645;</span>
        <div class="briefText">
          <p>评论数</p>
          <p>今日新增：<span class="color">{{webGeneral[2].addNums}}</span></p>
          <p>累计：{{webGeneral[2].allNums}}</p>
        </div>
      </div>
      <i></i>
      <!--      反馈数-->
      <div class="briefBox">
        <span class="iconfont icon color">&#xe605;</span>
        <div class="briefText">
          <p>反馈数</p>
          <p>今日新增：<span class="color">{{webGeneral[3].addNums}}</span></p>
          <p>累计：{{webGeneral[3].allNums}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../../assets/css/icon/iconfont.css'

  export default {
    name: "webGeneral",
    data(){
      return{
        webGeneral:[]
      }
    },
    created() {
      this.getWebGeneral();
    },
    methods:{
      //请求数据
      getWebGeneral() {
        this.$http({
          url: this.$http.adornUrl('/generator/home/getWebOverview'),
          method: 'get',
        }).then((res) => {
          this.webGeneral=res.data.data;
        })
      }
    }
  }
</script>

<style scoped>
  .color{
    color: #0BB2D4!important;
  }
  .icon{
    font-size: 40px;
    margin-top: 20px;
  }
  .font{
    font-size: 20px;
  }
  .brief{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .brief .briefBox:first-child {
    padding-left: 20px;
  }
  .brief .briefBox{
    width: 24%;
    min-width: 180px;
    padding: 8px 20px 8px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .briefText{
    margin-left: 20px;
  }
  .briefText p:first-child {
    font-size: 18px;
    color: #333;
  }
  .briefText p{
    margin-top: 10px;
  }
  .brief i{
    width: 1px;
    min-width: 1px!important;
    height: 60px;
    background: #e6e6e6;
    margin-top: 20px;
  }
</style>
